<template>
  <div>
       <div class="layout-content">
            <Row>
                <Col span="5">
                    <Menu active-name="1-2" width="115px" :open-names="['1']">
                        <Tree :data="baseData" @on-select-change="getNodeId"></Tree>
                    </Menu>
                </Col>
                <Col span="19">
                    <div class="layout-content-main" >
                        <Input v-model="valuein2" placeholder="请输入要搜索的新闻标题" style="width: 300px"></Input>
                        <Button type="primary" shape="circle" icon="ios-search" @click="search2">搜索</Button>
                        <Button type="primary" shape="circle" @click="recovery2">还原</Button>
                        <scroll height="600">
                            <Table border :columns="columns8" @on-selection-change="selected2" :data="list2"></Table>
                        </scroll>
                        <Page :total="filter2.total" show-total size="small" show-elevator show-sizer @on-page-size-change="pageSizeChange2" :page-size-opts='set2'  @on-change='changePage2' :current='filter2.current'  :page-size='size2' placement="top"></Page>

                    </div>
                </Col>
            </Row>
        </div>

        <Modal
        class="classname"
        v-model="modalLook"
        title="此条新闻的评论"
        width='1050'
        :styles="{top:'70px'}"
        ok-text="关闭"
        @on-visible-change="modalChange"
            >
            <div class="layout-content">
                <Col span="19">
                    <div class="layout-content-main" style="width:1025px">
                        <Button type="primary" @click="addData">添加评论</Button>
                        <Button type="error" @click="delAll">删除选中</Button>
                        <Input v-model="valuein" placeholder="请输入要搜索的评论" style="width: 300px"></Input>
                        <Button type="primary" shape="circle" icon="ios-search" @click="search">搜索</Button>
                        <Button type="primary" shape="circle" @click="recovery">还原</Button>
                        <Scroll >
                            <Table border :columns="columns7" @on-selection-change="selected" :data="list"></Table>
                        </Scroll >
                        <Page :total="filter.total" show-total size="small" show-elevator show-sizer @on-page-size-change="pageSizeChange" :page-size-opts='set'  @on-change='changePage' :current='filter.current'  :page-size='size' placement="top"></Page>
                    </div>
                </Col>
            </div>
        </Modal>

        <div style="z-index=10">
            <Modal v-model="modal1" title="评论管理" @on-ok="ok()" @on-cancel="cancel()" >
                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="60" >
                    <FormItem label="评论" prop="comment">
                        <!-- quill-editor -->
                            <editor ref="myTextEditor" v-model="formValidate.comment"     >
                            </editor>
                    </FormItem>
                    <FormItem label="作者" prop="author">
                        <Input v-model="formValidate.author" placeholder="请署名"></Input>
                    </FormItem>
                    <FormItem label="rate" prop="rate">
                        <Rate v-model="this.formValidate.rate" @on-change="changeStar"></Rate>
                    </FormItem>
                </Form>
            </Modal>
        </div>

  </div>
</template>

<script>
import Base from '../common/Base.js';
import { quillEditor } from 'vue-quill-editor';
export default {
    mixins:[Base],
    components: {
        editor:quillEditor
    },
    data(){
        return{
            columns8: [
                {
                    title: '标题',
                    key: 'title',
                },
                {
                    title: '作者',
                    key: 'author',
                    width:'100px'
                },
                {
                    title: '副标题',
                    key: 'btitle',
                },
                {
                    title: '评论数',
                    key: 'commentCount',
                    width:'80px'
                },
                    {
                    title: '时间',
                    key: 'date',
                    width: 120,
                },
                    
                {
                    title: '操作',
                    key: 'action',
                    width: 100,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.look(params.row._id);
                                        this.modalLook=true;
                                    }
                                }
                            }, '查看评论'),
                        ]);
                    }
                }
            ],
            columns7: [
                    {
                        type:'selection',
                        width:60,
                        align:'center'
                    },
                    {
                        title: '评论',
                        key: 'comment',
                        width:300,
                        render: (h, params) => {
                            return h('div', {
                                domProps:{
                                    innerHTML:params.row.comment
                                }
                            })
                        }
                    },
                     {
                        title: '作者',
                        key: 'author',
                     },
                     {
                        title: '评价',
                        key: 'rate',
                        align: 'center',
                        width:170,
                        render: (h, params) => {
                            return h('div', [
                                h('Rate', {
                                    props: {
                                        
                                        type: 'primary',
                                        size: 'small',
                                        value:parseInt(params.row.rate),
                                        disabled:true
                                    },
                                    style: {
                                        marginRight: '5px'
                                    }
                                }, ''),
                            ])
                        }
                     },
                     {
                        title: '时间',
                        key: 'date',
                     },
                     
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            console.log(params);
                                            this.modal1=true;
                                            this.itid=params.row._id;
                                            this.editData(params.row._id);
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.deleteData(params.row._id);
                                            this.$Message.success('删除成功!');
                                            this.changePage();
                                            this.getData();
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
            ////////////////////////////////////////////////////////新闻列表
            list2:[],
            value:0,
            curpage2:'',
            id2:'',
            set2:[2,4,6,10],
            size2:4,
            select2:[],
            modalLook: false,
            valuein2:'',
            filter2:{
                page:1,
                limit:4,
                name:'',
                total:0,
                current:1,
                postId:''
            },
            ////////////////////////////////////////////////////////评论列表
            itid:'',
            
            baseData:[],
            cateId:null,
            module:'comment',
            formValidate:{
                comment: '',
                author: '',
                rate:0,
                cateId:null
            },
            ruleValidate: {
                comment: [
                    { required: true, message: '评论不能为空', trigger: 'blur' }
                ],
                author: [
                    { required: true, message: '请署名~', trigger: 'blur' }
                ]
            }
        }
    },
    created(){
        this.getTree();
        this.getData();
        this.getData2()
    },
    methods:{
        getNodeId(nodeInfo){
            try{
                if(!nodeInfo[0].children){
                    this.id2=nodeInfo[0]._id;
                    this.formValidate.cateId=nodeInfo[0]._id;
                    this.filter2.cateId=nodeInfo[0]._id;
                    this.getData2();
                }else{
                    this.$Message.info('请点击子分类获取信息')
                }
            }catch(e){
                this.$Message.info('再点击一次节点!');
            }
            
        },
        getData2(){
            if(this.id2){
                console.log('有')
                this.filter2.postId=this.id2;
                this.$http({
                    method:'post',
                    url:'http://localhost:3000/news/getcate2',
                    data:this.filter2
                })
                .then(res=>{
                    console.log(res);
                    this.list2 = res.data.rows;
                    this.filter2.total = res.data.total;
                    this.curpage2=res.data.pages;
                    this.filter2.limit=res.data.limit;
                })
            }else{
                console.log('无')//请求分页；
                this.$http({ 
                    method:'post',
                    url:'http://localhost:3000/news/list',
                    data:this.filter2
                })
                .then(res=>{
                    console.log(res)
                    this.list2 = res.data.rows;
                    this.filter2.total = res.data.total;
                    this.curpage2=res.data.pages;
                    this.filter2.limit=res.data.limit;
                })
            }
        },
        pageSizeChange2(page){
            this.size2=page;
            this.filter2.limit=page;
            this.changePage2(this.filter2.current);
        },
        selected2(selection){
            this.select=[];
            for(var i=0;i<selection.length;i++){
                this.select2.push(selection[i]._id);
            }
        },
        search2(){
            this.$http({//添加
                method:"post",
                url:'http://localhost:3000/news/search',
                data:{title:this.valuein2,name:this.valuein2,comment:this.valuein2}
            }).then((response)=>{
                this.filter2.total=response.data.total
                this.list2=response.data.rows;
            })
        },
        recovery2(){
            this.getData2();
            this.changePage2(this.filter2.current);
        },
        changePage2(page){
            this.filter2.page=page;
            this.getData2();
            this.filter2.current=page;
        },
        ///////////////////////////////////////////////////////////////////////////////////////
        getTree(type){
            this.$http({
                url:'http://localhost:3000/cate/list/1',
                method:'get'
            }).then(res=>{
                this.baseData = res.data;
            })
        },
        look(nodeInfo){
            this.id=nodeInfo;
            this.formValidate.cateId=nodeInfo;
            this.filter.cateId=nodeInfo;
            console.log(nodeInfo);
            this.getData();
        },
        changeStar(star){
            this.formValidate.rate=star
        },
        cleanInput(){
            this.formValidate.comment='';
            this.formValidate.author='';
            this.formValidate.rate=0;
        },
        getInput(response){
            this.formValidate.comment=response.data.comment;
            this.formValidate.author=response.data.author;
            this.formValidate.rate=response.data.rate-0;
        },
        modalChange(state){//关闭评论列表后重新刷新新闻列表更新评论数
            console.log(state)
            if(state==false){
                this.getData2()
            }
        }
    }


}
</script>
<style scoped>
    .classname .layout-content{
        height:350px;
    }
    .ivu-col-span-5{
        width:14%;
    };
    .classname .ivu-modal-footer{
        display:none;
    }
</style>
